import GlassButton from "./GlassButton";

interface LeaderControlButtonProps {
  showControlPanel: boolean;
  onToggleControlPanel: () => void;
}

export default function LeaderControlButton({
  showControlPanel,
  onToggleControlPanel,
}: LeaderControlButtonProps) {
  return (
    <GlassButton
      onClick={onToggleControlPanel}
      icon={
        <svg
          enableBackground="new 0 0 50.4 50.4"
          viewBox="5 10 42 40"
          xmlns="http://www.w3.org/2000/svg"
          height="24"
          width="24"
          fill="currentColor"
        >
          <circle cx="23.588" cy="38.103" r="3.601" />
          <path d="m46.73 12.567v-12.574l-9.669 8.956s-.649.558-1.813 1.108c-.447.21-1.018.341-1.384.388l-18.862.055c-1.388.013-2.069 1.051-2.389 1.993l10.071-.008c.279 0 .491.298.492.577 0 .281-.228.509-.505.509l-10.264.009c-.008 0-.015-.005-.025-.007l-3.768.007c-1.074.001-1.941.875-1.939 1.954 0 1.07.874 1.937 1.948 1.936l1.654-.001v21.448l-2.833 1.652c-.8.468-1.071 1.494-.604 2.295.466.799 1.492 1.07 2.294.603l5.152-3.004 2.1 2.073c-.084.083-.172.164-.238.249-2.782 3.354-3.906 7.617-3.906 7.617h10.733s-.003-1.571-.37-3.42l5.729 1.482c.139.036.28.053.42.053.551 0 1.08-.271 1.396-.746l4.438-6.657c.514-.771.306-1.812-.465-2.326-.765-.51-1.787-.306-2.307.445v-11.244zm-31.001 24.603c-.541-.531-1.369-.639-2.024-.255l-2.496 1.456v-20.904l7.042-.003 2.71-1.666c.233-.144.544-.07.693.17.145.24.072.55-.165.694l-1.299.798h.014l-6.199 3.793c-.91.574-1.185 1.77-.615 2.681.371.592 1.007.91 1.656.909.35 0 .704-.099 1.024-.297l.777-.476v14.204zm12.291 7.747-6.005-1.554c-.005-.001-.01-.001-.016-.002l-4.219-4.168v-15.695l5.38-3.301 7.304-.015c.465.034 1.244.213 1.303.98.065.84-.621 1.437-.621 1.437l.022-.004-2.953 3.004c-.756.767-1.153 2.44-.223 3.284.396.358 1.014.589 1.611.537.456-.032.913-.174 1.281-.491v11.503h.125z" />
        </svg>
      }
      tooltip="Control via Leader Robot"
      pressed={showControlPanel}
    />
  );
}
